<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>系统设置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .layui-form-item .layui-input-company {width: auto;padding-right: 10px;line-height: 38px;}
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div id="chartA" style="height:600px;width:800px">
        
        </div>
    </div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<!-- 引入echarts的js文件 -->
<script src="../lib/echarts/echarts.js"></script>
<script>


	

	
	
    layui.use(['form'], function () {
        var form = layui.form,
        	$ = layui.$, 
            layer = layui.layer;
		//发送ajax请求 
		$.post('/chart/money',function(res){
			var resData = [];
			for(m of res){
				resData.push({name:m.name , value: m.money }); //数组追加元素
			}
			//绑定页面上画图区域(div)  获取ecahrts实例
			var myChart = echarts.init( document.getElementById("chartA") );
			//定义一个对象 封装画图所需的配置和数据
			var option = {
			  title: {
			    text: '盈利比重',
			    subtext: '测试',
			    left: 'center'
			  },
			  tooltip: {
			    trigger: 'item'
			  },
			  legend: {
			    orient: 'vertical',
			    left: 'left'
			  },
			  series: [
			    {
			      name: 'Access From',
			      type: 'pie',
			      radius: '50%',
			      data: resData,
			      emphasis: {
			        itemStyle: {
			          shadowBlur: 10,
			          shadowOffsetX: 0,
			          shadowColor: 'rgba(0, 0, 0, 0.5)'
			        }
			      }
			    }
			  ]
			};
			// 将option对象  封装到  echarts实例中   实现效果
			myChart.setOption( option );
		},'json');
    
    });
</script>
</body>
</html>